<template>
  <div class="orderCard bgwrite">
    <div class="top">
      <div class="name fz2">{{form.orderName}}</div>
      <div class="content flex fz4">
        <div class="wordsGray">作图数量</div>
        <div>{{form.countUid}}张</div>
      </div>
      <!-- 待收图 待结算 已完成 已关闭 -->
      <div v-if="form.orderStatus=='5' || form.orderStatus=='6'||(form.orderStatus=='7'&&form.finishcode!='gunevaluate') || (form.orderStatus=='2'&&form.closecode!='allowance')  ">
        <div class="content flex fz4">
          <div class="wordsGray">总计时间</div>
          <div>{{form.totalTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">预付金额</div>
          <div>{{form.subsist}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">尾款金额</div>
          <div>{{form.subsequentAmount}}</div>
        </div>
      </div>
      <!-- 改图的 待付款 改图进行中 待确认 -->
      <div v-else-if="form.orderStatus=='8' || form.orderStatus=='9' || form.orderStatus=='10' ||(form.orderStatus=='7'&&form.finishcode=='gunevaluate')">
        <div class="content flex fz4">
          <div class="wordsGray">要求效果</div>
          <div>{{form.require}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">所需时间</div>
          <div>{{form.needTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">改图报价</div>
          <div>{{form.changeMoney}}</div>
        </div>
      </div>
      <div v-else>
        <div class="content flex fz4">
          <div class="wordsGray">初次上门</div>
          <div>{{form.homeTime}}</div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">预约日期</div>
          <div>
            <span v-for="(item,index) in form.preordainDate "
                  :key="index">{{item}} <span v-show="index!=form.preordainDate.length-1">、</span> </span>
          </div>
        </div>
        <div class="content flex fz4">
          <div class="wordsGray">约定地点</div>
          <div>{{form.address}}</div>
        </div>
      </div>
    </div>
    <div class="ordertype"
         v-if="form.orderType=='1'">
      <!-- 进行中 -->
      <div v-if="form.orderStatus=='2'">
        <div class="bot flex flex-space-x">
          <!-- 计时中 -->
          <div class="botleft flex"
               v-if="form.orderStatus=='0'">
            <div class="wordsGray tit">计时中</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
          </div>
          <div class="botright flex"
               v-if="form.orderStatus=='0' ">
            <div class="wordsprimary fz4">进入计时器</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRight.png"
                   width="100%"
                   alt="">
            </div>
          </div>
          <div class="rightimg"
               v-if="form.orderStatus=='2'">
            <img src="@/assets/img/performance/orderCard/doNow.png"
                 width="100%"
                 alt="">
          </div>
          <!-- 上传方法 -->
          <div class="botleft wordsGray fz5 flex"
               v-if="form.orderStatus=='9'">
            对方已付款，改图完成需上传
          </div>
          <div class="botright flex"
               v-if="form.orderStatus=='9'">
            <div class="wordsprimary fz4">查看上传方法</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRight.png"
                   width="100%"
                   alt="">
            </div>
          </div>
          <div class="rightimg"
               v-if="form.orderStatus=='9'">
            <img src="@/assets/img/performance/orderCard/doNow1.png"
                 width="100%"
                 alt="">
          </div>
        </div>

      </div>
      <!-- 待服务 -->
      <div v-else-if="form.orderStatus=='1' ">
        <div class="bot flex flex-space-x">
          <div class="botleft wordsGray fz4 flex">
            半个小时内可申请改时
          </div>
          <div class="botright flex">
            <div class="wordsprimary service fz4">请求改时 (29:59)</div>
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitService.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 已关闭 -->
      <div v-else-if="form.orderStatus=='6'">
        <div class="bot flex flex-space-x">
          <!-- 补贴 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.closecode=='allowance'">
            订单被取消，补贴¥100
          </div>
          <!-- 迟到罚款 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.closecode=='fine'">
            订单被取消，迟到罚¥100
          </div>
          <!-- 被投诉 -->
          <div class="botleft wordsDanger fz4 flex"
               v-if="form.closecode=='beComplaint'">对方对你进行了投诉</div>
          <!-- 申诉成功 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.closecode=='appeal'">申诉成功</div>
          <!-- 申诉失败 -->
          <div class="botleft wordsDanger fz4 flex"
               v-if="form.closecode=='unappeal'">申诉失败</div>
          <div class="botright flex">
            <div class="bgprimary close wordsWrite fz4"
                 v-if="form.closecode=='allowance'"
                 @click="go_subsidy">查看补贴费</div>
            <div class="bgprimary close wordsWrite fz4"
                 v-if="form.closecode=='fine'">查看罚款详情</div>
            <div class="bgdanger close wordsWrite fz4"
                 v-if="form.closecode=='beComplaint'"
                 @click="go_appeal">查看并申诉</div>
            <div class="bgprimary close wordsWrite fz4"
                 v-if="form.closecode=='appeal'">查看详情</div>
            <div class="bgdanger close wordsWrite fz4"
                 v-if="form.closecode=='unappeal'">查看处理详情</div>
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/hasClose.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待签到 -->
      <div v-else-if="form.orderStatus=='1'">
        <div class="bot flex flex-space-x">
          <!-- 未到签到时间 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.signcode=='nosign'">请提前半个钟定位签到</div>
          <!-- 签到倒计时 -->
          <div class="botleft flex"
               v-if="form.signcode=='sign'">
            <div class="wordsGray tit">倒计</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgprimary wordsWrite fz2">00</div>
          </div>
          <!-- 签到迟到 -->
          <div class="botleft flex"
               v-if="form.signcode=='signed'">
            <div class="wordsGray tit">迟到</div>
            <div class="timeclock bgdanger wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgdanger wordsWrite fz2">00</div>
            <div class="wordsprimary dots fz2">：</div>
            <div class="timeclock bgdanger wordsWrite fz2">00</div>
          </div>
          <!-- 未到签到时间 -->
          <div class="botright flex"
               v-if="form.signcode=='nosign'">
            <div class="nosign fz4">未到签到时间</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRightG.png"
                   width="100%"
                   alt="">
            </div>
          </div>
          <!-- 签到倒计时 -->
          <div class="botright flex"
               v-if="form.signcode=='sign'">
            <div class="wordsprimary fz4">去定位签到</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRight.png"
                   width="100%"
                   alt="">
            </div>
          </div>
          <!-- 签到迟到 -->
          <div class="botright flex"
               v-if="form.signcode=='signed'">
            <div class="wordsDanger fz4">您已迟到，快去签到</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRightR.png"
                   width="100%"
                   alt="">
            </div>
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitSign.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待开始 -->
      <div v-else-if="form.orderStatus=='7'">
        <div class="bot flex flex-space-x">
          <div class="botleft flex">
            <div class="wordsGray tit">用时</div>
            <div class="timeclock bgstart wordsWrite fz2">00</div>
            <div class="dots1 fz2">：</div>
            <div class="timeclock bgstart wordsWrite fz2">00</div>
            <div class="dots1 fz2">：</div>
            <div class="timeclock bgstart wordsWrite fz2">00</div>
          </div>
          <!-- 请求开始计时 -->
          <div class="botright bgprimary flex wordsWrite fz4"
               v-if="form.startcode=='please'">
            请求开启计时
          </div>
          <!-- 待对方确认 -->
          <div class="botright flex wordsWrite fz4"
               v-if="form.startcode=='wait'">
            <div class="rbgstart">待对方确认开启</div>
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitStart.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待收图 -->
      <div v-else-if="form.orderStatus=='3'">
        <div class="bot flex flex-space-x">
          <div class="botleft wordsGray fz4 flex"> 计时结束，去上传文件</div>
          <div class="botright flex">
            <div class="wordsprimary fz4">查看上传方法</div>
            <div class="arrowRight">
              <img src="@/assets/img/performance/orderCard/arrowRight.png"
                   width="100%"
                   alt="">
            </div>
          </div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitDrawing.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待结算 -->
      <div v-else-if="form.orderStatus=='9'">
        <div class="bot flex flex-space-x">
          <div class="botleft wordsGray fz4 flex">对方未结算收图</div>
          <div class="botright bgprimary flex wordsWrite fz4">提醒Ta</div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitBalance.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 已完成 -->
      <div v-else-if="form.orderStatus=='5'">
        <div class="bot flex flex-space-x">
          <!-- 未评价 -->
          <!-- 没改图的 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.finishcode=='unevaluate'">对方尚未评价</div>
          <!-- 改图 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.finishcode=='gunevaluate'">待对方评价</div>
          <div class="botright unclick flex wordsWrite fz4"
               v-if="form.finishcode=='unevaluate' || form.finishcode=='gunevaluate'">查看评价</div>
          <!-- 已评价 -->
          <div class="botleft wordsGray fz4 flex"
               v-if="form.finishcode=='evaluate'">对方给出了评价</div>
          <div class="botright bgprimary flex wordsWrite fz4"
               @click="go_assess"
               v-if="form.finishcode=='evaluate'">查看评价</div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/finished.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待付款 -->
      <div v-else-if="form.orderStatus=='8'">
        <div class="bot flex flex-space-x">
          <div class="botleft wordsGray fz4 flex">待对方确认付款</div>
          <div class="botright bgprimary flex wordsWrite fz4">提醒Ta</div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitPay.png"
               width="100%"
               alt="">
        </div>
      </div>
      <!-- 待确认 -->
      <div v-else-if="form.orderStatus=='10'">
        <div class="bot flex flex-space-x">
          <div class="botleft wordsGray fz4 flex">图已上传，待对方确认</div>
          <div class="botright bgprimary flex wordsWrite fz4">提醒Ta</div>
        </div>
        <div class="rightimg">
          <img src="@/assets/img/performance/orderCard/waitConfirm.png"
               width="100%"
               alt="">
        </div>
      </div>
      <div class="msg">
        <div class="dot">
          <img src="@/assets/img/performance/orderCard/dot.png"
               width="100%"
               alt="">
        </div>
        <img src="@/assets/img/performance/orderCard/itemMsg.png"
             width="100%"
             alt="">
      </div>
    </div>

  </div>
</template>
<script>

export default {
  props: ["form"],
  methods: {
    //申诉
    go_appeal() {
      this.$router.push("/performance/complaintDetail");
    },
    //查看补贴费
    go_subsidy() {
      this.$router.push("/performance/subsidy");
    },
    //查看评价
    go_assess() {
      this.$router.push("/performance/assessDetail");
    }
  },
  filters: {
   
  }
};
</script>

<style lang="scss" scoped>
.orderCard {
  position: relative;
  width: 94%;
  margin: auto;
  box-shadow: 0px 2px 8px 4px rgba(216, 216, 216, 0.5);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.24rem;
  .top {
    padding: 0.4rem 0.24rem;
    .name {
      font-weight: bold;
      margin-bottom: 0.1rem;
      width: calc(100% - 1.4rem);
      height: 0.58rem;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
    }
    .content {
      margin-top: 0.2rem;
      div:first-child {
        width: 1.35rem;
      }
      div:last-child {
        width: calc(100% - 1.35rem);
      }
    }
  }
  .ordertype {
    .bot {
      background-color: #eff4ff;
      height: 1.08rem;
      //
      .botleft {
        width: 50%;
        align-items: center;
        justify-content: center;
        .tit {
          margin-right: 0.15rem;
        }
        .timeclock {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 6px;
          font-weight: 600;
          text-align: center;
          line-height: 0.6rem;
        }
        .bgstart {
          background-color: #dfe8ff;
        }
        .dots1 {
          color: #dfe8ff;
          font-weight: 600;
        }
        .dots {
          font-weight: 600;
        }
      }
      .botright {
        align-items: center;
        justify-content: center;
        width: 50%;
        .arrowRight {
          position: relative;
          top: 0.03rem;
          width: 0.24rem;
          margin-left: 0.16rem;
        }
        .service {
          height: 1.08rem;
          line-height: 1.08rem;
          width: 100%;
          text-align: center;
          background-color: #dfe8ff;
          font-weight: 600;
        }
        /* 已关闭 */
        .close {
          height: 1.08rem;
          line-height: 1.08rem;
          width: 100%;
          text-align: center;
        }
        /* 待签到 */
        .nosign {
          color: #cccccc;
        }
        /* 待开始 */
        .rbgstart {
          width: 100%;
          height: 100%;
          line-height: 1.08rem;
          text-align: center;
          background-color: #dfe8ff;
        }
      }
      .unclick {
        background-color: #dfe8ff;
      }
    }
    .rightimg {
      position: absolute;
      width: 1.2rem;
      top: 0;
      right: 0;
    }
    .msg {
      position: absolute;
      width: 0.9rem;
      top: 1rem;
      right: 0.3rem;
      .dot {
        position: absolute;
        right: 0.12rem;
        top: 0.12rem;
        width: 0.22rem;
      }
    }
  }
}
</style>
